<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="Vue.js"></script>
		<style type="text/css">
			[v-cloak]{
				display:none;
			}
		</style>
	</head>
	<body>
		<h2>前端渲染：把数据填充到HTML标签中</h2>
		<p>前端渲染方式</p>
		<ul>
			<li>1,原生js拼接字符串:基本上就是将数据以字符串的方式拼接到HTML标签中。</li>
			<li>2,使用前端模板引擎</li>
			<li>3,使用vue特有的模板语法
                <ol>
					<li>vue模板语法概览</li>
					<li>差值表达式{{}}</li>
					<li>指令:本质自定义属性</li>
					<li>事件绑定</li>
					<li>属性绑定</li>
					<li>样式绑定</li>
					<li>分支循环结构</li>
				</ol>			
			</li>
		</ul>
		<hr>
		<div id="app">
			<div v-cloak>{{mag}}</div><!-- 解决插值表达式{{。。。}}闪动的问题 -->
			<div v-text="mag"></div>
			<div v-html="mag1"></div>
			<div v-pre>{{msg}}</div>
			<div v-once>{{info}}</div>
		</div>
		
		<script>
			/* 
			[1]v-cloak指令：
			-->解决插值表达式{{。。。}}闪动的问题
			-->用法：1,提供样式：[v-cloak]{
				display:none;
			}
			2,再插值表达式所在的标签中添加v-cloak指令
			-->解决原理：先隐藏，替换好值之后再显示最终的值
			===================================================
			[2]v-text填充文本-->不存在闪动的问题
			[3]v-html填充HTML片段
			-->存在安全问题xss,本网站内部数据使用，第三方数据最好不用
			[4]v-pre填充原始信息，跳过编译过程
			[5]v-once只编译一次，显示内容之后不在具有响应式功能
			 -->应用场景，如果显示的信息后续不需要在修改，可以使用v-once,可以提高性能(vue不需要再监听这个数据)
			[6]v-model双向数据绑定（数据到页面；页面到数据）
			 */
			var vm = new Vue({
				el:"#app",
				data:{
					mag:"hello world",
					mag1:"<h2>wuhao</h2>",
					info:"nihao"
				}
			})
		</script>
	</body>
</html>
